<template>
  <div>
    御剑乘风来,除魔天地间!employees.vue
    <PageTools>
      <!-- <template #left> -->
      <!-- <template v-slot:left> -->
      <template slot="right" />
      <template #right>
        <!-- 绑定click事件，编程式导航实现跳转 -->
        <el-button
          v-arrow="'excel_export'"
          size="small"
          type="primary"
          @click="handleDownload"
        >导出</el-button>
        <el-button
          size="small"
          type="primary"
          @click="$router.push('/employees/import')"
        >导入</el-button>
        <el-button
          size="small"
          type="primary"
          @click="addEmp"
        >新增员工</el-button>
      </template>
    </PageTools>
    <!-- 表格 -->
    <div style="padding: 30px">
      <el-card>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="index" label="序号" width="80" />
          <el-table-column prop="username" label="姓名" sortable width="120" />
          <el-table-column prop="mobile" label="手机号" sortable width="120" />
          <el-table-column prop="workNumber" label="工号" width="120" />
          <el-table-column prop="formOfEmployment" label="聘用形式" width="100">
            <template slot-scope="scoped">
              {{
                scoped.row.formOfEmployment === 1 ? '正式' : '非正式'
              }}</template></el-table-column>
          <el-table-column prop="departmentName" label="部门" width="120" />
          <!--  展示表格中的数据，2种方法：
          1.prop
          2.插槽
          -->
          <el-table-column label="入职时间" width="120">
            <template slot-scope="scoped">
              <!-- 管道符 | -->
              {{ scoped.row.timeOfEntry | forMat('YYYY-MM-DD') }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="300">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="$router.push('/employees/detail/' + scope.row.id)"
              >查看</el-button>
              <el-button
                type="text"
                size="small"
                @click="handleClick(scope.row)"
              >转正</el-button>
              <el-button
                type="text"
                size="small"
                @click="handleClick(scope.row)"
              >调岗</el-button>
              <el-button
                type="text"
                size="small"
                @click="handleClick(scope.row)"
              >离职</el-button>
              <el-button
                type="text"
                size="small"
                @click="roleHandle(scope.row.id)"
              >角色</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="margin: 20px 0; text-align: right"
          :current-page="paramsObj.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="paramsObj.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
    <!-- 表格 -->

    <!-- 对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
    ><empDia
      v-if="dialogVisible"
      :dialog-visible.sync="dialogVisible"
      @success="success"
    />
    </el-dialog>
    <!-- 对话框 -->

    <!-- 给用户分配角色 -->

    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleRole"
      width="50%"
      @close="roleIds = []"
    >
      ==={{ roleIds }}
      <el-checkbox-group v-model="roleIds">
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{
          item.name
        }}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleRole = false">取 消</el-button>
        <el-button type="primary" @click="doRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getEmployeeList, assignRoles } from '@/api/employees'
import empDia from './components/empDia.vue'
import { getRoles } from '@/api/setting'
import { getDetailInfo } from '@/api/user'
// import { parseTime } from '@/utils'
export default {
  components: {
    empDia
  },
  data() {
    return {
      tableData: [],
      paramsObj: {
        page: 1,
        size: 5
      },
      total: 0,
      dialogVisible: false,
      // page表示第N页，size表示每页显示个数。total为一共多少个数据
      header: [],
      dialogVisibleRole: false,
      roleList: [],
      roleIds: [],
      id: ''
    }
  },
  computed: {},
  created() {
    this.loadEmp()
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    async loadEmp() {
      const res = await getEmployeeList(this.paramsObj)
      // console.log(res, 8)
      this.tableData = res.data.rows
      this.total = res.data.total
      this.tableData.forEach((item, index) => {
        item.index = index + 1 + this.paramsObj.size * (this.paramsObj.page - 1)
      })
      /* 获取所有的角色列表 */
      const res2 = await getRoles()
      // console.log(res2, 81)
      this.roleList = res2.data.rows
    },
    /* 分页
    作业：实现表格序号按照顺序来  第一页：1-5  第二页：6-10 。。。。。
    */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.paramsObj.size = val
      this.loadEmp()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.paramsObj.page = val
      this.loadEmp()
    },
    /* 分页 */
    // 新增员工
    addEmp() {
      /*
      步骤分析：
      1-点击添加员工按钮
      2-显示对话框
      3-对话框表单结构布局
      4-数据绑定+校验
      5-聘用形式=>数据展示
      6-展示部门树形结构数据列表
      7-点击取消按钮
        7-1 清空表单数据
        7-2 关闭对话框
      8-点击提交按钮
        8-1 封装api接口函数
        8-2 调用函数
        8-3 成功后：关闭对话框+刷新页面+清空表单数据
      */
      this.dialogVisible = true
    },
    success() {
      // 成功后：关闭对话框+刷新页面+清空表单数据
      this.loadEmp()
      this.dialogVisible = false
    },
    /* 导出 */
    handleDownload() {
      import('@/vendor/Export2Excel').then(async(excel) => {
        // 获取所有的数据
        const res = await getEmployeeList({ page: 1, size: this.total })
        // list: 导出的数据列表
        const list = res.data.rows
        /* 处理之后返回的excel数据列表 data是一个二维数组
        formatJson====处理list数据，将数据处理成二维数组，返回使用data接收了
        */
        const data = this.formatJson(list)
        // 设置表头
        const tHeader = this.header
        excel.export_json_to_excel({
          multiHeader: [
            ['前端72期', '', '', '', '', '', '', '', '', ''],
            ['前端72===22222期', '', '', '', '', '', '', '', '', '']
          ], // 设置多表头
          merges: ['A1:J1', 'A2:B2'], // 合并列
          header: tHeader,
          data: data,
          filename: 'web72' // 设置文件名
          // autoWidth: this.autoWidth
          // autoWidth: true, //设置表格宽度自适应的  默认是：true
          // bookType: "txt", //设置文件格式
        })
      })
    },
    formatJson(list) {
      // return jsonData.map((v) =>
      //   filterVal.map((j) => {
      //     if (j === 'timestamp') {
      //       return parseTime(v[j])
      //     } else {
      //       return v[j]
      //     }
      //   })
      // )
      const map = {
        id: '编号',
        password: '密码',
        mobile: '手机号',
        username: '姓名',
        timeOfEntry: '入职日期',
        formOfEmployment: '聘用形式',
        correctionTime: '转正日期',
        workNumber: '工号',
        departmentName: '部门',
        staffPhoto: '头像地址'
      }
      // 将一维list数组转化为二维数组
      return list.map((item) => {
        /* 4-定义一个收集数据的对象 */
        var obj = {}
        /* 1-根据需求筛选出想要的几个数据===获取字段  map */
        /* 2-获取所有的英文键 */
        var enKey = Object.keys(map)
        // console.log(enKey, 1111)
        /* 3-获取每一个英文键所对应的值 */
        enKey.forEach((key) => {
          /* 5-获取中文键 ,并定义对象中属性*/
          var zhKey = map[key] // 编号
          obj[zhKey] = item[key] // {编号:值}==>{编号：65c2,密码:1111112233}
        })
        // console.log(obj)
        /* 6-获取所有obj中的值 */
        var valueArr = Object.values(obj) // ["2018-11-02","管理员","9002"]
        // console.log(valueArr, 9) // []
        /* 7.获取obj中文键作为表头 */
        this.header = Object.keys(obj)
        return valueArr
      })
    },
    async roleHandle(id) {
      /*
      步骤分析：
      1-点击按钮显示对话框
      2-获取所有的角色列===并展示
      3-获取当前用户所拥有的角色====并选中
      4-实现复选框的选中和取消
      5-点击按钮
        5-1 封装api接口函数
        5-2 调用 ===传入需要拥有的角色
        5-3 成功后：关闭对话框
      */
      this.dialogVisibleRole = true
      this.id = id
      /* 获取当前用户所拥有的角色列表  */
      this.getUserRoles(id)
    },
    async getUserRoles(id) {
      /* 获取当前点击用户所拥有的角色 */
      const res = await getDetailInfo(id)
      // console.log(res, 766)
      this.roleIds = res.data.roleIds
    },
    async doRole() {
      // 点击分配角色对话框按钮
      const res = await assignRoles({
        id: this.id,
        roleIds: this.roleIds
      })
      this.dialogVisibleRole = false
    }
  }
}
</script>
<style lang="less" scoped></style>
